<script setup>
import { ref, toRef } from 'vue'

const checked = ref(1)
const themeVars = {}
const show = ref(false)
defineExpose({
  shows () {
    show.value = true
  }
})
const emit = defineEmits(['handle'])

const onConfirm = (val) => {
  checked.value = val
  emit('handle', val)
  show.value = false
}
const props = defineProps({
  typepay: { type: Number, default: 1 }
})
checked.value = toRef(props, 'typepay').value
</script>
<template>
  <van-config-provider :theme-vars="themeVars">
    <van-action-sheet v-model:show="show" :closeable="false"  title="支付方式">
      <div class="van-action-sheet__gap"></div>
      <van-radio-group v-model="checked">
        <van-cell
          title="微信"
          clickable
          size="large"
          title-class="v-list"
          @click="onConfirm(1)"
        >
          <template #title>
            <svg-icon name="微信" size="2.2em" color="#0ff" />
            &nbsp;&nbsp;<span>微信</span>
          </template>
          <template #right-icon>
            <van-radio :name="1" />
          </template>
        </van-cell>

        <van-cell
          title="支付宝"
          clickable
          size="large"
          title-class="v-list"
          @click="onConfirm(2)"
        >
          <template #title>
            <svg-icon name="支付宝" size="2.2em" color="#0ff" />
            &nbsp;&nbsp;<span>支付宝</span>
          </template>
          <template #right-icon>
            <van-radio :name="2" />
          </template>
        </van-cell>
      </van-radio-group>
      <div class="van-action-sheet__gap"></div>
      <van-cell  size="large"></van-cell>
    </van-action-sheet>
  </van-config-provider>
</template>

<style lang="scss">
.v-list {
  display: flex;
  align-items: center;
}
</style>
